<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>在线日志</title>
</head>
<body>
    <!-- 日志容器 -->
    <div id="logContainer"></div>
    <script th:src="@{/common/js/basic.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/common/js/LogMonitorAdaptive.js}" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" th:inline="javascript" charset="utf-8">
        window.onload = () => {

            let ws = null;

            const logger = new LogMonitorAdaptive('#logContainer', {
                theme: 'dark',
                maxLines: 10000,
                fontSize: 14,
                enableFilter: true,
                enableSearch: true,
                enableExport: true,
                enableClear: true,
                enablePause: true,
                enableThemeToggle: true,
                enableFullscreen: true,
                enableFontSize: true,
                enableWordWrap: true,
                showTimestamp: true, // 是否显示时间戳
                showLevel: true,     // 是否显示日志级别标签
                wordWrap: true,    // 日志内容是否自动换行（true=换行，false=横向滚动）
                //暂停/继续 回调函数
                onTogglePause: (isPaused) => {

                },
                onCreated: () => {
                    console.log('日志容器已创建');
                }
            });

            try {
                if ('WebSocket' in window) {
                    ws = new WebSocket((Fmt.ctx() + '/socket/ws').replace("http", "ws").replace("https", "wss"));
                } else {
                    alert('浏览器不支持WebSocket通讯');
                    return false;
                }

                ws.onmessage = function (event) {
                    if(event.data){
                        let data = JSON.parse(event.data);
                        let message = `${data.number} --- [ ${data.threadName} ] <span style="color: #198cff;">${data.name}</span> : ${data.message}`;
                        logger.log(message, data.level, data.timestamp);
                    }
                }

                //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
                window.onbeforeunload = ()=> {
                    ws.close();
                };
            } catch (e) {
                alert('WebSocket:链接失败');
            }
        }
    </script>
</body>
</html>